import React, { useEffect, useState } from "react";
import "./NewAfterSales.css";
import { DownOutlined } from "@ant-design/icons";
import store from "../../store";
import "./AfterRouter.css";
import { useNavigate } from "react-router-dom";

/* 模态框 */
import { Modal } from "antd";

import { Link, Outlet } from "react-router-dom";

export default function AfterRouter() {
  const navigate = useNavigate();
  useEffect(() => {
    navigate("/home/after");
    return () => {
      navigate("/home");
    };
  }, []);
  const obj1 = {};
  let obj = {};
  const [classrouter, setclassrouter] = useState(0);
  const [classsousuo, setclasssousuo] = useState(true);
  const [arrowchange, setArrowchange] = useState(false);
  const [condition, setcondition] = useState("");
  const [isModalVisible, setIsModalVisible] = useState(false);

  //新增模态框
  const showModal = () => {
    setIsModalVisible(true);
  };
  //模态框发起请求
  const handleOk = (e) => {
    setIsModalVisible(false);
    console.log(e.currentTarget.getAttribute("data-name"));
    store.AfterSales.upda(obj1);
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };

  /*  点击改变选项卡颜色 */
  function clickCliss(e) {
    console.log("点击");
    setclassrouter(e.currentTarget.getAttribute("data-index"));
  }
  //获取新增的值
  const newdata = (e) => {
    console.log(e.target.name + e.target.value);
    obj1[e.target.name] = e.target.value;
  };
  //获取高级搜索的值
  const handleInput = (e) => {
    obj[e.target.name] = e.target.value;
    console.log(obj.user_name);
  };
  //高级搜索
  const gaojisousuo = () => {
    console.log(obj);
    store.AfterSales.gaosousuo(obj);
  };
  //获取普通搜索框的值
  const textsousuo = (e) => {
    setcondition(e.target.value);
  };
  //点击普通搜索查询
  const select = () => {
    store.AfterSales.selectlist(condition);
  };
  /* 点击展开高级搜索 */
  function sousuo() {
    console.log(classsousuo);
    setclasssousuo(!classsousuo);
    setArrowchange(!arrowchange);
  }

  return (
    <>
      <div className="router">
        <ul>
          <li
            id={"0" === classrouter ? "gaoliang" : ""}
            onClick={clickCliss}
            data-index="0"
          >
            <Link to="/home/after">售后列表</Link>
          </li>
          <li
            id={"1" === classrouter ? "gaoliang" : ""}
            onClick={clickCliss}
            data-index="1"
          >
            <Link to="/home/Processed">已处理</Link>
          </li>
          <li
            id={"2" === classrouter ? "gaoliang" : ""}
            onClick={clickCliss}
            data-index="2"
          >
            <Link to="/home/Processing">处理中</Link>
          </li>
          <li
            id={"3" === classrouter ? "gaoliang" : ""}
            onClick={clickCliss}
            data-index="3"
          >
            <Link to="/home/Untreated">未处理</Link>
          </li>

          <li className="child">
            <span onClick={showModal}>新增售后</span>
            <Modal
              title="新增"
              visible={isModalVisible}
              onOk={handleOk}
              onCancel={handleCancel}
              okText="确认"
              cancelText="取消"
              width="640px"
            >
              <div id="mod">
                <ul>
                  <li style={{ display: "flex" }}>
                    <span>客户名称</span>
                    <span>
                      <input
                        type="text"
                        name="customer_name"
                        onChange={newdata}
                      />
                    </span>
                  </li>{" "}
                  <li style={{ display: "flex" }}>
                    <span>相关商品</span>
                    <span>
                      <input
                        type="text"
                        name="related_products"
                        onChange={newdata}
                      />
                    </span>
                  </li>{" "}
                  <li style={{ display: "flex" }}>
                    <span>反馈主题</span>
                    <span>
                      <input
                        type="text"
                        name="feedback_theme"
                        onChange={newdata}
                      />
                    </span>
                  </li>
                  <li style={{ display: "flex" }}>
                    <span>售后分类</span>
                    <span>
                      <select onChange={newdata} name="after_classification">
                        <option value="0">请选择</option>
                        <option value="产品质量">产品质量</option>
                        <option value="操作问题">操作问题</option>
                        <option value="其他问题">其他问题</option>
                      </select>
                    </span>
                  </li>
                  <li style={{ display: "flex" }}>
                    <span>联系人</span>
                    <span>
                      <input
                        type="text"
                        name="contact_name"
                        onChange={newdata}
                      />
                    </span>
                  </li>{" "}
                  <li style={{ display: "flex" }}>
                    <span>反馈时间</span>
                    <span>
                      <input
                        type="date"
                        name="feedback_time"
                        onChange={newdata}
                      ></input>
                    </span>
                  </li>{" "}
                  <li style={{ display: "flex" }}>
                    <span>备注</span>
                    <span>
                      <input type="text" name="comment" onChange={newdata} />
                    </span>
                  </li>{" "}
                  <li style={{ display: "flex" }}>
                    <span>售后状态</span>
                    <span>
                      <select onChange={newdata} name="after_state">
                        <option value="">请选择</option>
                        <option value="0">未处理</option>
                        <option value="1">处理中</option>
                        <option value="2">已处理</option>
                      </select>{" "}
                    </span>
                  </li>
                  <li style={{ display: "flex" }}>
                    <span>处理时间</span>
                    <span>
                      <input
                        type="date"
                        name="handling_time"
                        onChange={newdata}
                      ></input>
                    </span>
                  </li>
                  <li style={{ display: "flex" }}>
                    <span>处理结果</span>
                    <span>
                      <input
                        type="text"
                        name="result_handling"
                        onChange={newdata}
                      />
                    </span>
                  </li>
                </ul>
              </div>
            </Modal>
          </li>
        </ul>
        <div id="divright">
          <input type="text" onChange={textsousuo} />
          <button className="btnsousuo" onClick={select}>
            搜索
          </button>
          <button onClick={sousuo} className="btn">
            高级搜索
            <DownOutlined className={arrowchange ? "arrowup" : "arrowdown"} />
          </button>
        </div>
        {/*     高级搜索 */}
        <div className={classsousuo ? "sousuonone" : "sousuoblock"}>
          <div id="heighSearch">
            <div className="left">
              <ul>
                <li>
                  <span>客户id</span>
                  <span>
                    <input
                      name="customer_id"
                      onChange={handleInput}
                      type="text"
                    />
                  </span>
                </li>
                <li>
                  <span>售后分类</span>
                  <span>
                    <select name="after_classification" onChange={handleInput}>
                      <option value="0">请选择</option>
                      <option value="产品质量">产品质量</option>
                      <option value="操作问题">操作问题</option>
                      <option value="其他问题">其他问题</option>
                    </select>
                  </span>
                </li>
                <li>
                  <span>结束时间</span>
                  <span>
                    <input
                      type="date"
                      name="handling_time"
                      onChange={handleInput}
                    ></input>
                  </span>
                </li>
                <li>
                  <span>业务员</span>
                  <span>
                    <select name="user_name" onChange={handleInput}>
                      <option value="0">请选择</option>
                      <option value="超级管理员">超级管理员</option>
                    </select>
                  </span>
                </li>
              </ul>
            </div>
            <div className="middle">
              <ul>
                <li>
                  <span>客户名称</span>
                  <span>
                    <input
                      type="text"
                      name="customer_name"
                      onChange={handleInput}
                    />
                  </span>
                </li>
                <li>
                  <span>反馈主题</span>
                  <span>
                    <input
                      type="text"
                      name="feedback_theme"
                      onChange={handleInput}
                    />
                  </span>
                </li>
                <li>
                  <span>反馈时间</span>
                  <span>
                    <input
                      type="date"
                      name="feedback_time"
                      onChange={handleInput}
                    ></input>
                  </span>
                </li>{" "}
              </ul>
            </div>
            <div className="right">
              <ul>
                <li>
                  <span>联系人</span>
                  <span>
                    <input
                      type="text"
                      name="contact_name"
                      onChange={handleInput}
                    />
                  </span>
                </li>
                <li>
                  <span>备注</span>
                  <span>
                    <input name="comment" onChange={handleInput} type="text" />
                  </span>
                </li>
                <li>
                  <span>售后状态</span>
                  <span>
                    <select name="after_state" onChange={handleInput}>
                      <option value="">请选择</option>
                      <option value="0">未处理</option>
                      <option value="1">处理中</option>
                      <option value="2">已处理</option>
                    </select>
                  </span>
                </li>
              </ul>
            </div>
          </div>

          <div className="bdr">
            <div className="btnitem">
              <button onClick={gaojisousuo}>立即搜索</button>
              <button>清空条件</button>
            </div>
          </div>
        </div>
      </div>
      <Outlet />
    </>

    //       * <Routes>
    // /*         <Route path="/After" element={<After />} />
    //         <Route path="/Processed" element={<Processed />} />
    //         <Route path="/Processing" element={<Processing />} />
    //         <Route path="/Untreated" element={<Untreated />} />
    //         <Route path="/NewAfterSales" element={<NewAfterSales />} />
    //         <Route path="/" element={<Navigate to="/After" />} /> */
    //       </Routes>
  );
}
